<template>
	<view
	    class="address_container component-diy"
	    :style='{
			padding:(componentData.data.marginTop*2)+"rpx "+(componentData.data.marginLeftRight*2)+"rpx "+(componentData.data.marginBottom*2)+"rpx"
		}'>
	    <view
	      class="address_card"
	      :style='{
			  background:cardBackGround,
			  borderRadius:componentData.data.cardRadios * 2 + "rpx",
			  padding:componentData.data.paddingTop*2+"rpx "+componentData.data.paddingLeftRight*2+"rpx "+componentData.data.paddingBottom*2+"rpx"
		  }'
	    >
	      <image style="width:70px; height:70px; margin-right: 8px" :src="componentData.data.merchantsLogo" lazy-load></image>
	      <view class="address_info">
	        <view class="address_name"
	         :style="{
				 fontSize:componentData.data.merchantsNameFont+'px',
				 color:componentData.data.merchantsNameColor,
				 fontWeight:componentData.data.merchantsNameFontWeight
			 }"
	          @click="clickTo('address')" data-type="address"
	        >
	          {{componentData.data.merchantsName}} >
	        </view>
	        <view class="address_desc"
	          :style="{
				  fontSize:componentData.data.merchantsDescFont + 'px',
				  color:componentData.data.merchantsDescColor,
				  fontWeight:componentData.data.merchantsDescFontWeight
			  }"
	        >
	          <text>{{componentData.data.merchantsDate}} \n {{componentData.data.merchantsDesc}}</text>
	        </view>
	      </view>
	      <view class="float_icons">
	        <image style="width:26rpx;height:32rpx" src="/static/block_phone.png" @click="clickTo('phone')"></image>
	      </view>
	    </view>    
	  </view> 
</template>
<script>
	export default {
		props: {
			componentData: {
				type: Object
			},
		},
		data:function(){
			return {
				cardBackGround:"" // 卡片背景
			}
		},
		created:function(){
			let cardBackGround = this.componentData.data.cardBackgroundType === 'img' ? `url('${this.componentData.data.cardBackgroundImg}') no-repeat center` : this.componentData.data.cardBackgroundColor;
			this.cardBackGround = cardBackGround;
			
		},
		methods:{
			clickTo(types) {
			  const type = types;
			  console.log("我被点击过了");
			  let addressInfo = this.componentData.data;
			  switch(type) {
				case 'phone':
				  if(!!addressInfo.merchantsPhone) {
					this.makePhoneCall(addressInfo.merchantsPhone);
				  } else {
					uni.showToast({
					  title: '商家未设置客服电话',
					  icon: 'none'
					})
				  }
				  break;
				case 'address':
				  let coordinates = addressInfo.coordinates.split(',')
				  console.log("看看是啥数据",coordinates);
				  let latitude = Number(coordinates[0]);
				  let longitude = Number(coordinates[1]);
				  uni.openLocation({
					longitude,
					latitude,
					scale: 18,
					name: addressInfo.merchantsName,
					address: addressInfo.merchantsDesc,
					success: res => {
					  console.log(res)
					},
					fail: err => {
					  console.log(err)
					}
				  })
				  break;
			  }
			},
			makePhoneCall(phoneNumber) {
			  var that = this;
			  uni.getSystemInfo({
				success: function (res) {
				  if (res.platform == "devtools") {
					uni.makePhoneCall({
					  phoneNumber: phoneNumber,
					  success: function () {
						console.log("拨打电话")
					  }
					})
				  } else if (res.platform == "ios") {
					uni.makePhoneCall({
					  phoneNumber: phoneNumber,
					  success: function () {
						console.log("拨打电话")
					  }
					})
				  } else if (res.platform == "android") {
					uni.showModal({
					  title: '是否联系商家',
					  content: phoneNumber,
					  showCancel: true,
					  cancelText: '取消',
					  cancelColor: '',
					  confirmText: '确定',
					  confirmColor: '#B35DCC',
					  success: function (res) {
						if (res.confirm) {
						  uni.makePhoneCall({
							phoneNumber: phoneNumber,
							success: function () {
							  console.log("拨打电话")
							}
						  })
						}
					  },
					  fail: function (res) {},
					  complete: function (res) {},
					})
				  }
				}
			  })
			}
		}
	}
</script>
	
<style>
	.address_container {
	  overflow: hidden;
	  box-sizing: border-box;
	}
	.to_edit_address {
	  font-size: 16px;
	  color: #333;
	}
	.address_card {
	  position: relative;
	  display: flex;
	  justify-content: flex-start;
	  align-items: center;
	  box-sizing: border-box;
	  background-size: cover;
	  height: 100px;
	}
	.address_info{
	  position: relative;
	}
	.address_desc {
	  max-width: 500rpx;
	}
	.address_name {
	  line-height: 2;
	}
	.float_icons {
	  position: absolute;
	  top: 20px;
	  right: 20px;
	  display: flex;
	  align-items: center;
	}
	.col_line {
	  height: 22px;
	  width: 2px;
	  background-color: #DCDCDC;
	  margin: 0 10px;
	}
</style>